<template>
  <div v-if="question !== null" class="question-examer">
    <h3 class="question-examer-tips">答题区</h3>
    <mu-container>
      <mu-alert color="info" >
        <mu-icon left value="help"></mu-icon>
        <b class="question-examer-ask">问题：{{ question.ask }}</b>
        <span>&nbsp;{{ timeReadable }}</span>
      </mu-alert>

      <!-- 图片 -->
      <mu-paper v-if="question.graph !== null">
        <img :src="`/api/questions/${question.id}/graph`" alt="图片">
      </mu-paper>

      <div v-if="question.question_form === 1" class="question-examer-choose">
        <!-- 选择题所有选项 -->
        <mu-paper :z-depth="2" class="demo-list-wrap">
          <mu-list>
            <mu-list-item v-for="(item, i) in question.options" :key="i" :ripple="false" button>
              <mu-list-item-title>{{ toChar(i) }} {{ item }}</mu-list-item-title>
              <mu-button color="primary" @click="handleChoose(i)">选择答案</mu-button>
            </mu-list-item>
          </mu-list>
        </mu-paper>
      </div>

      <div v-else class="question-examer-fill">
        <!-- 填空题 -->
        <mu-paper :z-depth="2" class="demo-list-wrap">
          <!-- 答案输入框 -->
          <mu-container>
            <mu-text-field style="width:100%" placeholder="请输入答案"></mu-text-field>
          </mu-container>
          <mu-container class="question-examer-fill-answer">
            <!-- 答案和确认按钮 -->
            <div v-if="showAnswer" class="question-examer-fill-answer-submit">
              <p>{{ question.answer }}</p>
              <div style="padding:10px">
                <mu-button color="primary" @click="submitExam(true)">我做对了</mu-button>
                <mu-button style="margin-left:10px" color="error" @click="submitExam(false)">我做错了</mu-button>
              </div>
            </div>
            <!-- 显示答案按钮 -->
            <mu-button v-else color="primary" @click="showAnswer = true">显示答案</mu-button>
          </mu-container>
        </mu-paper>
      </div>
    </mu-container>
  </div>

  <div v-else class="question-examer">
    <h3 class="question-examer-tips">答题区</h3>
    <p class="question-examer-tips">未打开任何题目</p>
  </div>
</template>

<script>
import { examQuestion } from '@/api/questions'

function fixNum(num) {
  const prefix = num < 10 ? '0' : ''
  return prefix + num.toString()
}

export default {
  name: 'QuestionExamer',
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      timer: null,
      time: 0,
      showAnswer: false
    }
  },
  computed: {
    timeReadable() {
      const second = this.time % 60
      const minute = parseInt(this.time / 60)
      return fixNum(minute) + ':' + fixNum(second)
    }
  },
  watch: {
    question() {
      this.time = 0
      this.showAnswer = false
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.time++
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    toChar(i) {
      return String.fromCharCode(65 + i)
    },
    async handleChoose(i) {
      const chooseAnswer = String.fromCharCode(65 + i)
      const questionAnswer = this.question.answer
      await this.submitExam(chooseAnswer === questionAnswer)
      this.$emit('refresh')
    },
    async submitExam(status) {
      const id = this.question.id
      await examQuestion(id, status)
      if (status) {
        this.$toast.success('恭喜你答对了')
      } else {
        this.$toast.info('很可惜答错了哦')
      }
      this.$emit('refresh')
    }
  }
}
</script>

<style>
.question-examer-tips {
  text-align: center;
}
.question-examer-ask {
  font-size: 1.7em;
  line-height: 1.7em;
}
.question-examer-choose-list-item {
  list-style: none;
}
.question-examer-fill-answer {
  padding: 20px;
  text-align: center;
}
</style>
